<!DOCTYPE html>
<html lang="en">

<head>
    <title>快速量化响应技术平台</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" href="./lib/leaflet/leaflet.css" />
    <link rel="stylesheet" type="text/css" href="./lib/leaflet-velocity/dist/leaflet-velocity.css">
    <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="./css/demo.css" />
    <link rel="stylesheet" type="text/css" href="./css/home.css" />

    <link rel="stylesheet" href="./iconfont/iconfont.css">

    <!-- 自定义选项样式 -->
    <link rel="stylesheet" type="text/css" href="./css/customstyle.css">
    <link rel="stylesheet" type="text/css" href="./css/radio.css">
    <link rel="stylesheet" type="text/css" href="./css/default.css">
    <link rel="stylesheet" type="text/css" href="./css/timeline.css">
    <link rel="stylesheet" type="text/css" href="./css/homemedia.css">
    <link rel="stylesheet" type="text/css" href="./css/layers.css">

    <script src="./lib/leaflet/leaflet-src.js"></script>
    <script src="./lib/jquery.min.js"></script>
    <script src="./lib/bootstrap.min.js"></script>
    <script type="text/javascript" src="./lib/timeline.js"></script>
    <!--[if lte IE 8]>
<link href="./css/ie8.css" rel="stylesheet" type="text/css"/>
<![endif]-->
    <script type="text/javascript" src="./lib/modernizr.js"></script>
    <!--[if IE]>
    <script type="text/javascript" src="./lib/html5shiv.min.js"></script>
<![endif]-->

    <script src="./lib/leaflet-velocity/dist/leaflet-velocity.js"></script>
    <script src="./lib/leaflet-heat.js"></script>
</head>

<body>
    <div id="map"></div>
    <div class="container-fluid">
        <div class="container_center">
            <div class="center_header">
                <div class="header_catalogue header_item"><i class="catalogue_icon iconfont icon-catalogue"></i></div>
                <div class="header_item header_response">快速量化响应技术平台</div>
                <div class="header_item"><i class="search_icon iconfont icon-iconfontzhizuobiaozhun22"></i><input type="text" name="search" class="header_search"></div>
                <div class="header_item header_item_padding"><i class="scene_icon iconfont icon-ic_timer"></i>
                    <a href="index.html">实况</a>
                </div>
                <div class="header_item header_item_padding"><i class="forecast_icon iconfont icon-diqiuquanqiu"></i>
                    <a href="indexleftlet.html">预报</a>
                </div>
                <div class="header_item header_item_padding"><i class="warn_icon iconfont icon-lingdang"></i>
                    <a href="#">应急</a>
                </div>
                <div class="header_item header_item_padding"><i class="assess_icon iconfont icon-wenjian"></i>
                    <a href="#">评估</a>
                </div>
                <div class="header_item header_item_padding"><i class="emission_icon iconfont icon-radiation-emp"></i>
                    <a href="emission.html">排放</a>
                </div>
            </div>
        </div>
        <div class="center_bottom">
            <div class="progressTimebox">
                <div id="progressTime_control" onclick="progressTimeControl(this)" title="开始"></div>
                <div class="progressTime" id="progressTime" style="z-index:9">
                    <div>
                        <p id="startTime" style=" float:left;margin-left:33px;opacity: 0;display: none;"></p>
                        <p id="endTime" style=" float:right;margin-right:33px;opacity: 0;display: none;"></p>
                    </div>
                    <div class="time_slot">
                        <p>06</p>
                        <p>07</p>
                        <p>08</p>
                        <p>09</p>
                        <p>10</p>
                    </div>
                    <div id="progressTime_concent">
                        <div id="scrollBarBox">
                            <div id="scrollBar">
                                <div id="scroll_Track"></div>
                                <div id="scroll_Thumb"></div>
                            </div>
                        </div>
                        <div class="timecode"></div>
                        <div style="width:90%; margin-left: auto;margin-right: auto;">
                            <div style="width:300px;float:right;margin-right:-110px;margin-top:-8px">
                                <p id="TimeSpeed" style="float:left;margin-right:40px;display:none">×1</p>
                                <p style="float:right" id="scrollBarTxt"></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="colorProgress">
                <span style="background: rgb(149,136,211); width:12.5%">°C</span>
                <span style="background: linear-gradient(to right, rgb(149,136,211), rgb(149,136,211), rgb(150,208,216)); width: 12.5%">-20</span>
                <span style="background: linear-gradient(to right, rgb(150,208,216), rgb(128,203,197), rgb(102,179,186)); width: 12.5%">-10</span>
                <span style="background: linear-gradient(to right, rgb(102,179,186), rgb(94,143,197), rgb(79,139,61)); width: 12.5%">0</span>
    	<span style="background: linear-gradient(to right, rgb(79,139,61), rgb(121,146,28), rgb(170,160,14)); width: 12.5%">10</span>
                <span style="background: linear-gradient(to right, rgb(170,160,14), rgb(222,177,6), rgb(242,150,6)); width: 12.5%">20</span>
                <span style="background: linear-gradient(to right, rgb(242,150,6), rgb(236,94,20), rgb(190,65,18)); width: 12.5%">30</span>
                <span style="background: linear-gradient(to right, rgb(190,65,18), rgb(138,42,10), rgb(138,42,10)); width: 12.5%">40</span>
            </div>
        </div>

        <div class="control_content">
            <div class="tabs_radios2">
                <div class="tabs_radio">
                    <input type="radio" id="tabs_radio-monitor00-1" name="monitor00_radio" checked="checked" /><label for="tabs_radio-monitor00-1"><span>温度</span></label>
                </div>
                <div class="tabs_radio">
                    <input type="radio" id="tabs_radio-monitor00-2" name="monitor00_radio" /><label for="tabs_radio-monitor00-2"><span>风速</span></label>
                </div>
                <div class="tabs_radio">
                    <input type="radio" id="tabs_radio-monitor00-3" name="monitor00_radio" /><label for="tabs_radio-monitor00-3"><span>雷暴</span></label>
                </div>
                <div class="tabs_radio">
                    <input type="radio" id="tabs_radio-monitor00-4" name="monitor00_radio" /><label for="tabs_radio-monitor00-4"><span>云</span></label>
                </div>
                <div class="tabs_radio">
                    <input type="radio" id="tabs_radio-monitor00-5" name="monitor00_radio" /><label for="tabs_radio-monitor00-5"><span>雾</span></label>
                </div>
            </div>
        </div>
    </div>

<script>
  var windLayer; //风层
  var Esri_DarkGreyCanvas;
  var temperature_heatLayer;

  //初试化地图，并加载风的数据
  //https://windytiles.mapy.cz/turist-m/{z}-{x}-{y}
  //https://tiles.windy.com/tiles/v8.1/darkmap/{z}/{x}/{y}.png
  //http://173.0.20.110:8099/geoq_tiles/{z}/{y}/{x}.png
  function initMap() {
      var Esri_WorldImagery = L.tileLayer('http://173.0.20.110:8099/darkmap_tiles/{z}/{y}/{x}.png', {
          maxZoom: 15
      });

      Esri_DarkGreyCanvas = L.tileLayer("http://173.0.20.110:8099/geoq_tiles/{z}/{y}/{x}.png", {
          attribution: '本地地圖服務'
      });

      var baseLayers = {
          "一级本地地图": Esri_WorldImagery,
          "二级本地地图": Esri_DarkGreyCanvas
      };
      var map = L.map('map', {
          layers: [Esri_WorldImagery],
          minZoom:3,
					maxZoom:15,
					maxBounds:[[90,0],[-90,359]]
      });
      //http://192.168.227.128:7000/latest
      //wind-global.json
      //初试化风的数据
      $.getJSON('./data/2018073000.json', function(data) {
          windLayer = L.velocityLayer({
              displayValues: true,
              displayOptions: {
                  velocityType: 'Global Wind',
                  displayPosition: 'bottomleft',
                  displayEmptyString: 'No wind data',
                  speedUnit: 'm/s'
              },
              data: data,
              minVelocity: 0,
              maxVelocity: 15,
              velocityScale: 0.01,
              //colorScale: ['#571']
          });
          windLayer.addTo(map);
      });
      var layerControl = L.control.layers(baseLayers, {}, {
          position: 'topleft'
      });
      //.addTo(map);
      //velocityLayer.addTo(map);
      //layerControl
      layerControl.addTo(map);
       L.tileLayer('https://tiles.windy.com/tiles/v7/labels-7.2.1/labels-loc/{z}/{x}/{y}.jpg').addTo(map);
      //[31.5709,120.2859]
      map.setView([31.5709, 120.2859], 5);
      return map;
  }
  //  初试化
  var map = initMap();
  //var map = mapStuff.map;
  //var layerControl = mapStuff.layerControl;
  
  var geojson;
  $.ajax({
    url:"./geojson/china.json",
    type:"get",
    data:{},
    async:false,
    dataType:"json",
    success:function(res){
      geojson = res;
    },
    err:function(err){
      console.log('err = ' + err);
    }
  });
  var provinceGeo = L.geoJSON(geojson,{
      style: function (feature) {
        return {color:'#ffffff'};
      }
  }).addTo(map);
  
  
</script>

<script src="./lib/leaflet-heatmap/heatmap.js"></script>
<script src="./lib/leaflet-heatmap/leaflet-heatmap.js"></script>
<script src="./js/layers.js"></script>
</body>

</html>
